import React from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react';
import echartTheme from '../themeLight'
import echarts from 'echarts'

export default class Line extends React.Component {

  state = {}

  componentWillMount() {
    echarts.registerTheme('Peach', echartTheme);
  }

  getOption() {
    let option = {
      title: {
        text: '用户骑行订单'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['OFO订单量', '摩拜订单量']
      },
      xAxis: {
        data: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'OFO订单量',
          type: 'line',
          stack: '总量',
          data: [
            1200,
            3000,
            4500,
            6000,
            8000,
            12000,
            20000
          ]
        },
        {
          name: '摩拜订单量',
          type: 'line',
          stack: '总量',
          data: [
            1000,
            2000,
            5500,
            6000,
            8000,
            10000,
            12000
          ]
        },
        {
          name: '小蓝订单量',
          type: 'line',
          stack: '总量',
          data: [
            1300,
            1000,
            1500,
            4000,
            9000,
            14000,
            17000
          ]
        },
      ]
    }
    return option;
  }

  render() {
    return (
      <div style={{ width: '1200px' }}>
        <Card style={{ marginTop: 10 }}>
          <ReactEcharts
            option={this.getOption()}
            theme="Peach"
            notMerge={true}
            lazyUpdate={true}
            style={{
              height: 500
            }} />
        </Card>
      </div>
    );
  }
}